<template>
  <view class="thing_list">
    <view class="main">
      <view class="scroll">
        <view
          class="box"
          v-for="(item, index) in boxList"
          :key="index"
          @tap="jumpPage(item)"
        >
          <img :src="item.image" alt="" class="img" />
          <!-- 标签 -->
          <view class="tag" v-if="item.tag">
            <img
              :src="
                item.tag == 'hot'
                  ? `$IMG_URL + ${tag_hot}`
                  : item.tag == 'select'
                  ? `$IMG_URL + ${tag_select}`
                  : `$IMG_URL + ${tag_new}`
              "
              alt=""
            />
          </view>
          <view class="text">{{ item.title }}</view>
          <view class="label">
            <img
              src="./images/lz.png"
              alt=""
              mode="heightFix"
              v-if="type == 1"
            />
            <img
              src="./images/ly.png"
              alt=""
              mode="heightFix"
              v-if="type == 2"
            />
          </view>
          <view class="price">
            <view class="bq" :class="type == 1 ? '' : 'bq2'">￥</view>
            <view class="jiage" :class="type == 1 ? '' : 'jiage2'">{{
              item.price
            }}</view>
            <view class="ding" v-if="type == 2">定金</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      type: 1,
      boxList: [],
      page: 1,
      rows: 10,
      //下拉完成到底
      finished: false,
      tag_hot: '/uploads/20230529/2c144db7fae1687c92e8746abde20083.png',
      tag_select: '/uploads/20230529/63ee02a7050bbd6f65fac633c4e0d848.png',
      tag_new: '/uploads/20230529/0a37638e1eec8965f0c1e91a2a40aefc.png',
      sale_type: '',
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  onLoad(e) {
    switch (e.type) {
      case 'directSales':
        this.type = 1;
        this.sale_type = 'direct';
        this.getdirectList();
        uni.setNavigationBarTitle({
          title: '好物直购',
        });
        break;
      case 'presale':
        this.type = 2;
        this.sale_type = 'prepare';
        this.getdirectList();
        uni.setNavigationBarTitle({
          title: '爱玩预售',
        });
        break;
    }
  },
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    //获取直购和预售商品列表
    getdirectList() {
      this.$http(
        'v1.getgoods',
        {
          page: this.page,
          rows: this.rows,
          sale_type: this.sale_type,
        },
        '加载中'
      ).then((res) => {
        if (res.code === 1) {
          this.boxList = [...this.boxList, ...res.data.list];
          if (res.data.list.length < this.rows) {
            this.finished = true;
          }
        }
      });
    },
    jumpPage(e) {
      _delay(() => {
        switch (this.type) {
          case 1:
            uni.navigateTo({
              url: `pages/directSales_presale/directSales_detail?id=${e.id}`,
            });
            break;
          case 2:
            uni.navigateTo({
              url: `pages/directSales_presale/presale_detail?id=${e.id}`,
            });
        }
      });
    },
  }, // 下拉加载更多
  onReachBottom() {
    if (this.finished) return;
    this.page = Number(this.page) + 1;
    this.getdirectList();
  },
};
</script>
<style lang="scss" scoped>
.thing_list {
  height: 100%;
  .main {
    background-color: #fff;
    width: 100%;
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-bottom: 20rpx;
    flex: 1;
    overflow: auto;
    margin-top: 10rpx;
    height: 100%;
    .scroll {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      justify-content: space-between;
      align-content: flex-start;
      .box {
        width: 349rpx;
        height: 504rpx;
        display: flex;
        flex-direction: column;
        margin-top: 15rpx;
        background: #fff;
        border-radius: 30rpx;
        box-shadow: 1rpx 4rpx 19rpx 5rpx rgba(207, 207, 207, 0.36);
        margin-bottom: 10rpx;
        position: relative;
        .img {
          width: 349rpx;
          height: 324rpx;
          border-radius: 30rpx 30rpx 0 0;
        }
        .tag {
          position: absolute;
          top: 6rpx;
          left: 8rpx;
          width: 80rpx;
          height: 80rpx;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          width: 309rpx;
          font-size: 28rpx;
          margin-left: 14rpx;
          margin-top: 11rpx;
          color: #000;
          text-overflow: ellipsis;
          display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
          -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
          -webkit-line-clamp: 2; /** 显示的行数 **/
          overflow: hidden; /** 隐藏超出的内容 **/
          height: 76rpx;
          font-family: PingFang SC-Heavy, PingFang SC;
          font-weight: 800;
        }
        .label {
          display: flex;
          justify-content: flex-start;
          align-content: center;
          height: 40rpx;
          margin-top: 4rpx;
          margin-left: 14rpx;
          img {
            height: 28rpx;
            margin-right: 10rpx;
          }
        }
        .price {
          margin-left: 14rpx;
          margin-right: 14rpx;
          height: 42rpx;

          .bq {
            display: inline-block;
            font-size: 26rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            color: #3d3d3d;
            font-weight: 400;
            vertical-align: bottom;
            line-height: 1;
            &.bq2 {
              color: #ff64a8;
            }
          }
          .jiage {
            display: inline-block;
            font-family: DIN-Bold;
            font-display: swap;
            font-weight: 700;
            font-size: 36rpx;
            color: #3d3d3d;
            line-height: 1;
            vertical-align: bottom;
            &.jiage2 {
              color: #ff64a8;
            }
          }
          .ding {
            display: inline-block;
            font-size: 22rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #ff64a8;
            vertical-align: bottom;
            margin-left: 6rpx;
          }
        }
      }
      .loadMore {
        width: 100%;
      }
    }
  }
}
</style>
